<template>

  <div>
<div>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :on-success="handleImportSuccess"

      >
        <el-button type="primary">导入</el-button>
      </el-upload>
    </el-col>
    <el-col :span="1.5">
      <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"

      >导出</el-button>
    </el-col>

  </el-row>
</div>
    <el-table
        :data="categoryList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children:'children',hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="分类名称"  />
      <el-table-column prop="imageUrl" label="图标" #default="scope" >
        <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" width="50">
      </el-table-column>
      <el-table-column prop="orderNum" label="排序"  />
      <el-table-column prop="status" label="状态"  #default="scope">
        {{scope.row.status == 1?'正常':'停用'}}
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  />
    </el-table>
  </div>
</template>
<script setup name="Category">
import {listTree} from "@/api/product/category.js";
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/auth.js";

const { proxy } = getCurrentInstance();
onMounted(()=>{
  initData()
})
const categoryList = ref([]);

const initData = async ()=>{
  const {data} = await listTree(0)
  categoryList.value = data
}
const load = async (row, treeNode, resolve) => {
    //1.加载下一级数据   row表示点击的行数据
  const{data} =  await listTree(row.id)
   //2.将下一级数据渲染到row的下一级
        resolve(data)
 }
/** 导出按钮操作 */
function handleExport() {
  proxy.download("product/category/export",{

  }, `config_${new Date().getTime()}.xlsx`);
}
const handleImportSuccess = (r) =>{
      if (r.code ===200){
        ElMessage.success("导入成功")
      }else {
        ElMessage.error("导入失败")
      }
}
const uploadUrl = import.meta.env.VITE_APP_BASE_API+"/product/category/import"
const headers = {'Authorization':'Bearer ' + getToken()}
</script>